<!--
 * @Author: yeminglong
 * @Date: 2023-10-20 15:48:52
 * @LastEditTime: 2023-10-23 09:41:43
 * @LastEditors: yeminglong
 * @Description: 
-->
<template>
  <video
    ref="videoPlayerRef"
    class="video-js"
    style="width: 100%; height: 100%; overflow: hidden"
  ></video>
</template>
<script setup>
import videojs from "video.js";
import "video.js/dist/video-js.css";
const videoPlayerRef = ref(null);
const myPlayer = ref(null);
onMounted(() => {
  myPlayer.value = videojs(
    videoPlayerRef.value,
    {
      poster: "//vjs.zencdn.net/v/oceans.png",
      controls: true,
      sources: [
        {
          src: "//sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
          type: "video/mp4",
        },
      ],
      controlBar: {
        remainingTimeDisplay: {
          displayNegative: false,
        },
      },
      playbackRates: [0.5, 1, 1.5, 2],
    },
    () => {
      myPlayer.value.log("play.....");
    }
  );
});

onUnmounted(() => {
  if (myPlayer.value) {
    myPlayer.value.dispose();
  }
});
</script>